<script setup>
import { usePostListStore } from '@/stores/post';
import { useUserStore } from '@/stores/user';
import { useUserListStore } from '@/stores/user';
import PostCom from '@/components/PostCom.vue';
import router from '@/router';

const post = usePostListStore()


function toTopic(topic) {
    // console.log(topic);
    router.push({
        name: 'topic',
        query: {
            topic
        }
    })

}
</script>

<template>
    <div class="main">
        <van-nav-bar title="发现" />
        <div class="content">
            <van-row :gutter="[10, 10]">
                <van-col span="12" v-for="item in post.topicList" @click="toTopic(item)">
                    <van-card :title="item">
                        <template #thumb>
                            <img class="topicImg" src="https://img.shetu66.com/2023/04/25/1682410877994833.png" alt="">
                        </template>
                        <template #title>
                            <div class="title"># {{ item }}</div>
                        </template>
                        <template #desc>
                            <div class="desc">{{ parseInt(Math.random() * 200) }}浏览</div>
                        </template>
                    </van-card>
                </van-col>
            </van-row>

            <PostCom></PostCom>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.content {
    margin-top: 10px;
}

.van-card {
    // background-color: black
    height: 80px;
    background-color: rgb(236, 236, 236);
    border-radius: 10px;

    .topicImg {
        width: 60px;
        height: 60px;
    }

    .title {
        position: relative;
        right: 30px;
        font-size: 18px;
        width: 80px;
    }

    .desc {
        position: relative;
        right: 30px;
        top: 20px;
    }
}
</style>